<?php include VIEW_PATH . '/common/header.php' ?>

<div class="container" id="list">
	<div class="row header">
		<div class="col-md-12">
			<h1 class="text-center">常见评论展示形式实现</h1>
			<form class="form-inline float-right" method="post">
              <div class="form-check mb-2 mr-sm-2 mb-sm-0">
             	<?php foreach ($showTypes as $key => $value):?>
                <label class="custom-control custom-radio">
                  <input id="" name="show_type" type="radio" class="custom-control-input" value="<?php echo $key?>" <?php if ($showType == $key) echo 'checked';?>>
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description"><?php echo $value?></span>
                </label>
                <?php endforeach;?>
              </div>
              <button type="submit" class="btn btn-primary btn-sm">切换</button>
            </form>
		</div>
	</div>
	<?php include(sprintf("%s/%s", VIEW_PATH, $commentItemsView))?>
	<?php 
	   //分页
	   if (strpos($showType, 'indent') !== false)
	   {
	       //缩进式
	       $counts = $model->getCount([
	           'where' => 'root_id = :root_id',
	           'bind' => [':root_id' => 0],
	       ]);
	   }
	   else
	   {
	       //叠加式
	       $counts = $model->getCount();
	   }
	   $pageCounts = ceil($counts / $size);
	?>
	<div class="row">
		<div class="col-md-12 text-center">
			<nav aria-label="Page navigation example" class="d-inline-block">
              <ul class="pagination">
                <li class="page-item">
                  <a class="page-link" href="?page=<?php echo max($page - 1, 1)?>" aria-label="Previous">
                    <span aria-hidden="true">«</span>
                    <span class="sr-only">Previous</span>
                  </a>
                </li>
                <?php for ($i = 1; $i <= $pageCounts; $i++):?>
                <li class="page-item<?php if ($page == $i) echo " active"?>"><a class="page-link" href="?page=<?php echo $i?>"><?php echo $i?></a></li>
                <?php endfor;?>
                <li class="page-item">
                  <a class="page-link" href="?page=<?php echo min($page + 1, $pageCounts)?>" aria-label="Next">
                    <span aria-hidden="true">»</span>
                    <span class="sr-only">Next</span>
                  </a>
                </li>
              </ul>
            </nav>
		</div>
	</div>
	<div class="row add-comment">
		<div id="form-wrap" class="col-md-6 offset-md-3">
			<form id="form">
              <div class="form-group row">
              	<div class="col-sm-12">
                    <textarea rows="4" cols="" class="form-control" placeholder="最多200字" maxLength="200" name="content"></textarea>
                </div>
              </div>
                <div class="form-group row">
                  <div class="col-sm-12">
                    <input type="text" class="form-control" id="" placeholder="昵称，留空为匿名用户" name="nickname">
                  </div>
                </div>
                <div class="form-group row">
                  <div class="col-sm-12 text-center">
                    <button class="btn btn-info pointer">提交</button>
                    <a class="btn btn-warning pointer cancel" style="display: none">取消</a>
                  </div>
                </div>
            </form>
		</div>
	</div>
</div>
<div id="tip" style="display: none"></div>
<script>

//评论提交
var $form = $('#form').data("parent_id", 0);
var $formWrap = $("#form-wrap");
var $formCancel = $form.find(".cancel");
$form.on("submit", function(e) {
	e.preventDefault();
	var data = $form.serialize();
	data += "&parent_id=" + $form.data("parent_id");
	$.ajax({
		"url": "/create",
		"data": data,
		"method": "post",
		"dataType": "json",
	}).done(function(result) {
		console.log(result);
		if (result.code == 0)
		{
			window.location.reload();
		}
		else
		{
			alert(result.msg);
		}
	}).fail(function(xhr, textStatus) {
		alert(textStatus);
	})
});

$form.on("click", ".cancel", function(e) {
	$formCancel.hide();
	$formWrap.append($form.data("parent_id", 0));
});

//回复评论
var $list = $("#list");
$list.on("click", ".reply", function(e){
	var $this = $(this);
	var $pActions = $this.closest(".actions");
	$formCancel.show();
	$pActions.after($form.data("parent_id", $this.closest(".media").attr("data-id")));
});

//支持与反对
var $tip = $("#tip");
var isExecuting = false;
$list.on("click", ".vote", function(e){
	if (isExecuting)
	{
		return;
	}
	var $this = $(this);
	var id = $this.closest(".media").attr("data-id");
	var value = $this.hasClass("like") ? 1 : -1;
	$.ajax({
		"url": "/vote",
		"data": {"id": id, "value": value},
		"method": "post",
		"dataType": "json",
		"beforeSend": function() {isExecuting = true},
	}).done(function(result) {
		console.log(result);
		if (result.code == 0)
		{
			if (value == 1)
			{
				var thisText = "支持(" + result.data.num + ")";
				$tip.text("+ 1");
			}
			else
			{
				var thisText = "反对(" + result.data.num + ")";
				$tip.text("- 1");
			}
			var offset = $this.offset();
			$tip.css({
				"left": offset.left + $this.outerWidth()/2 - $tip.outerWidth()/2, 
				"top": offset.top - $tip.outerHeight(),
			})
			.animate({"top": "-=20px", "opacity": 1})
			.show()
			.delay(500)
			.fadeOut(function() {
				isExecuting = false;
				$tip.removeAttr("style");
				$this.text(thisText);
			})
		}
		else
		{
			isExecuting = false;
			alert(result.msg);
		}
	}).fail(function(xhr, textStatus) {
		isExecuting = false;
		alert(textStatus);
	})
});


//展开叠加多层隐藏的评论
function expand(pDom)
{
	var $p = $(pDom);
	var HTML = $p.attr("data-hide");
	var $wrap = $(HTML);
	var $target = $wrap;
	while (true)
	{
		$child = $target.children("blockquote");
		if ($child.length == 0)
		{
			break;
		}
		$target = $child;
	}
	$target.prepend($p.prev());
	$p.before($wrap).unwrap().remove();
}

//加载更多
$list.on("click", ".get-more", function(e) {
	if (isExecuting)
	{
		return;
	}
	var $this = $(this);
	var rootCommentId = $this.attr("data-root-comment-id");
	var offset = $this.attr("data-offset");
	$.ajax({
		"url": "/more",
		"data": {"root_comment_id": rootCommentId, "offset": offset},
		"method": "post",
		"dataType": "json",
		"beforeSend": function() {isExecuting = true},
	}).done(function(result) {
		console.log(result);
		isExecuting = false;
		if (result.code == 0)
		{
			var data = result.data.comments;
			if (data.length == 0) 
			{
				$this.closest(".media").remove();
				return;
			}
			var HTML = "";
			$.map(data, function(item) {HTML += item;});
			$this.closest(".media").before(HTML);
			$this.attr("data-offset", function(key, value) {
				return +value + data.length;
			});
			
		}
		else
		{
			isExecuting = false;
			alert(result.msg);
		}
	}).fail(function(xhr, textStatus) {
		isExecuting = false;
		alert(textStatus);
	})
});

</script>

<?php 
$sqls = $model->getAllSqls();
//echo sprintf("<pre><code>%s</code></pre>", implode("\n", $sqls));
include VIEW_PATH . '/common/footer.php' 
?>
